<template>
  <div>
    <div
      style="
        height: 80px;
        padding-top: 20px;
        background-image: linear-gradient(rgba(44, 165, 172, 0.7), rgba(79, 176, 141, 0.8)); border-radius: 8px 8px 0 0;"
    >
      <div style="float: right; margin-right: 20px">
        <el-input v-model="obj.province" placeholder="搜索"></el-input>
      </div>
      <div style="float: right; margin-right: 3%">
        <el-button type="primary" @click="toDataUpdate">数据上报</el-button>
      </div>
      <div style="float: right; margin-right: 2%">
        <el-button type="primary" @click="toDashboard">数据统计</el-button>
      </div>
      <div style="float: right; margin-right: 2%">
        <el-button type="primary" @click="toDashboard">数据统计</el-button>
      </div>
    </div>
    <div>
      <el-table :data="dataList.list" style="width: 100%;">
        <el-table-column
          fixed="left"
          align="center"
          prop="id"
          label="编号"
          width="50"
        >
        </el-table-column>
        <el-table-column align="center" prop="country"  label="国家" >
        </el-table-column>
        <el-table-column align="center" prop="province" label="省份">
        </el-table-column>
        <el-table-column align="center" prop="city" label="市">
        </el-table-column>
        <el-table-column align="center" prop="area" label="区">
        </el-table-column>
        <el-table-column align="center" prop="confirmed" label="现有确诊">
        </el-table-column>
        <el-table-column align="center" prop="suspected" label="疑似">
        </el-table-column>
        <el-table-column align="center" prop="dead" label="死亡">
        </el-table-column>
        <el-table-column align="center" prop="cure" label="治愈">
        </el-table-column>
        <el-table-column align="center" prop="severe" label="累计确诊">
        </el-table-column>
        <el-table-column align="center" prop="outside" label="境外输入">
        </el-table-column>
        <el-table-column
          align="center"
          prop="inputTime"
          label="录入时间"
          width="180"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.inputTime | dateFMT }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="dead" label="死亡" fixed="right">
          <template>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="change_page"
      style="margin-left: 30%; margin-top: 2%"
    >
    </el-pagination>
  </div>
</template>
 
<script>
// import moment from 'moment'
// 从vuex中导入辅助函数
// 辅助函数：帮助我们快速获取状态机中的变量或者方法
import { mapActions, mapState } from "vuex";
export default {
  // 如果全局过滤器和局部过滤器的名称一致时，组件优先采用局部过滤器的转换规则
  //   filters:{
  //       dateFMT(str){
  //           return moment(str).format('YYYY-MM-DD');
  //       }
  //   },

  // 计算属性
  computed: {
    // 从dataList.js中的state中获取dataList变量
    ...mapState("dataList", ["dataList"]),
  },
  watch: {
    obj: {
      handler: function () {
        this.page_query(this.obj);
      },
      deep: true,
    },
  },
  data() {
    return {
      obj: {
        page: 1,
        pageSize: 10,
      },
      total: 100,
    };
  },
  created() {
    this.page_query(this.obj);
  },
  methods: {
    // 从dataList.js中的actions中获取page_query方法
    ...mapActions("dataList", ["page_query"]),
    change_page(val) {
      this.obj.page = val;
      
    },
    toDataUpdate() {
      // 页面跳转,跳转至疫情地图页面，并携带参数（经纬度）
      this.$router.push({
        path: "/data_list/update",
      });
    },
    toDashboard() {
      // 页面跳转,跳转至疫情地图页面，并携带参数（经纬度）
      this.$router.push({
        path: "../map/index",
      });
    },
    toDashboard() {
      // 页面跳转,跳转至疫情地图页面，并携带参数（经纬度）
      this.$router.push({
        path: "../map/index",
      });
    },
  },
};
</script>